<style>
  #slider-move-code .stopText {
      font-size: 26px;
      color: #303030;
      text-anchor: middle;
  }

  #slider-move-code .stopTextAbove {
      font-size: 22px;
      fill: #AAAAAA;
      font-weight: 300;
      text-anchor: middle;
      /*color: #303030;*/
      stroke: none;
  }

  #slider-move-code .brush .extent {
    fill-opacity: 0;
    shape-rendering: crispEdges;
  }

  #slider-move-code .resize {
    display: inline !important; /* show when empty */
    fill: white;
    stroke: none;
    /*stroke-width: 3px;*/
  }

</style>

<section id="slider-move-code">
  <div id="sliderMoveCode"></div>

  <span class="fragment" data-fragment-index="4"><pre><code class="language-javascript" data-noescape data-trim>
.on("brush", d => {

  /*Update the left "border"*/
  d3.selectAll(".left").attr("offset", "40%")

  /*Update the right "border"*/
  d3.selectAll(".right").attr("offset", "60%")

  /*...do other things...*/
})
  </code></pre>

  <span class="fragment" data-fragment-index="1"></span>
  <span class="fragment" data-fragment-index="2"></span>
  <span class="fragment" data-fragment-index="3"></span>
</section>